<template>
  <div class="home">
    <my-header v-model="title" @enter="add(title)">
      <!-- v-model 是 两个指令的合写 v-bind:value和v-on:input -->
      <h3>TODOLIST</h3>
    </my-header>

    <!-- v-model也可以表示为： -->
    <!-- <my-header :value="title" @input="change"></my-header> -->

    <h1>{{ title }}</h1>

    <my-list :list="allList">
      <h3>所有任务 {{ allList.length }}</h3>
    </my-list>
    <my-list :list="unList">
      <h3>未完成任务 {{ unList.length }}</h3>
    </my-list>
    <my-list :list="finishedList">
      <h3>已完成任务 {{ finishedList.length }}</h3>
    </my-list>

    <hr />
    <h1>来自vuex的数据有{{ age }}={{ name }}</h1>
  </div>
</template>

<script>
// @ is an alias to /src
import myHeader from "@/components/myHeader.vue";
import myList from "@/components/myList.vue";

export default {
  data() {
    return {
      title: "hello",
    };
  },
  name: "Home",
  components: {
    myHeader,
    myList,
  },
  methods: {
    add() {
      this.$store.commit("add", this.title);
    },
    //添加方法
  },

  computed: {
    allList() {
      return this.$store.state.list;
    },
    //所有的数据
    finishedList() {
      let res = this.$store.state.list.filter((item) => {
        return item.status == true;
      });
      return res;
    },
    //完成的列表
    unList() {
      let res = this.$store.state.list.filter((item) => {
        return item.status == false;
      });
      return res;
    },
    //未完成的列表
    // 在这里可以认为 在计算属性里 对所有的数据进行计算 算出了一个已完成和一个未完成的数据 除了在这里计算还可以在getters里面进行计算
  },

  created() {
    this.$store.dispatch("getList");
    //调用action用dispatch
  },
};
</script>
